<!--《表头》搜索组建-->
<template>
    <div class="header-search-wrapper" :id="boxId" ref="searchInput" v-if="tableShow">
        <div class="search-wrapper" ref="searchWrapper">
            <a-table id="table_search" :scroll="{x:200,y:200}" :columns="columns" :data-source="tableData" :customRow="customClick" bordered :pagination="pagination" :loading="isRun">

            </a-table>
        </div>
        <div class="mask" @click="closeSearch"></div>
    </div>
</template>
<script>

import { getAction } from "@/api/manage";
import { Controlwidth } from "@/utils/antTableComponents";

export default {
    props: {
        inputValue: {
            type: String,
        },
        componentName: {
            type: String,
        },
        boxId: {
            type: String, //当前容器id
        },
        record: {
            type: Object,
            default: {}
        }
    },
    updated () {
        Controlwidth("table_search", 100)
    },
    watch: {

    },
    data () {
        return {
            codesName: null,         //当前组建名称
            columns: [],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 0,
                size: 'small',
                onChange: (page, pageSize) => {
                    // this.postData.current = page;
                    this.pagination.current = page;
                    this.pagination.pageSize = pageSize;
                    this.pageList();
                }
            },
            postData: {},
            tableData: [],
            customClick: (record, index) => ({
                on: {
                    click: (event) => {
                        event.preventDefault();
                        this.clickEnter('click', record);
                    },
                },
            }),
            tableShow: false,
            isRun: false,
            setTime: null,  //延迟请求
            id: null,       //当前选择的搜索id
            tableBody: null,
            apiUrl: null,
            inputValue: '',  //输入框的值
            componentArray: {
                team: {
                    "name": "班组",
                    "code": "teamName",
                },
                process: {
                    "name": "工序名称",
                    "code": "workName",
                },
                bomVersion: {
                    "name": "子件BOM",
                    "code": "bomVersion",
                },
                processRoute: {
                    "name": "工艺路线",
                    "code": "processRoute",
                },
                category: {
                    "name": "凭证类别",
                    "code": "category",
                },
                warehouse: {
                    "name": "仓库",
                    "code": "warehouse",
                },
                office: {
                    "name": "部门",
                    "code": "office",
                },
                employees: {
                    "name": '经手人',
                    "code": 'employees'
                },
                warehouseTypeOut: {
                    "name": '出库类别',
                    "code": 'warehouseTypeOut'
                },
                warehouseTypeIn: {
                    "name": '入库类别',
                    "code": 'warehouseTypeIn'
                },
                crm: {
                    "name": '客户',
                    "code": "crm"
                },
                supplie: {
                    "name": '供应商',
                    "code": "supplie"
                },
                contacts: {
                    "name": '往来单位',
                    "code": "contacts"
                },
            }
        }
    },
    created () {
        this.checkSearch();
    },
    methods: {
        pageList (defaultRun) {
            this.postData.searchKey = this.inputValue;
            if (!this.isRun) {
                this.isRun = true;
                this.postData.current = this.pagination.current
                this.postData.size = this.pagination.pageSize
                this.postData['page.current'] = this.pagination.current
                this.postData['page.size'] = this.pagination.pageSize
                getAction(this.apiUrl, this.postData).then(response => {
                    if (response.code === 200) {

                        if (this.componentName == 'category') {//没有分页
                            let data = response.data;
                            data.forEach(element => {
                                this.$set(element, 'name', element.className);
                            });
                            let recData = data.map(v => {
                                return { ...v, key: v.id }
                            })
                            this.tableData = recData;
                        } else {
                            const { records, total, current, size } = response.data;
                            let page = {
                                total: total,
                                pageSize: size,
                                current: current
                            }
                            this.pagination = Object.assign(this.pagination, page);
                            console.log("请求地址：", this.apiUrl)
                            //返回值处理
                            let val = this.componentName;
                            switch (val) {
                                case 'employees'://业务员
                                    records.forEach(element => {
                                        this.$set(element, 'name', element.realName);
                                    });
                                    break;
                                case 'bomVersion'://子件bom
                                    records.forEach(element => {
                                        this.$set(element, 'name', element.versionCode);
                                    });
                                    break;
                                case 'crm'://客户
                                    records.forEach(element => {
                                        this.$set(element, 'name', element.crmName);
                                    });
                                    break;
                                default:
                                    break;
                            }
                            this.tableData = records;
                        }
                        this.isRun = false;
                    }
                }).catch(error => { });
            }
        },
        showModal () {
            this.tableShow = true;
            this.pageList();
            this.codesName = this.componentName;
            this.boxId = this.componentName;

            this.$nextTick(() => {
                let w = document.body.clientWidth;//当前可视窗口宽度
                let searchBox = this.$refs.searchWrapper.getBoundingClientRect();
                console.log('弹出框距离左侧距离：', searchBox.right, w)

                if (searchBox.right >= w) { //右边溢出处理
                    this.$refs.searchWrapper.style.right = 20 + 'px';
                } else if (searchBox.left < 250) {
                    this.$refs.searchWrapper.style.left = 250 + 'px';
                }
            })
        },
        onclose () {
            this.tableShow = false;
        },
        closeSearch () {
            this.tableShow = false;

            //删除数据
            if (!this.inputValue) {
                this.$emit('clickItem', { name: null, codesName: this.codesName });
            }
        },
        inputSearch () {
            this.postData.searchKey = this.inputValue;
            //延迟请求
            if (this.setTime) {
                clearTimeout(this.setTime)
            }
            this.setTime = setTimeout(() => {
                this.pageList();
            }, 500)
        },
        clickEnter (type, record) {
            //type == 'click' 表示点击表格事件
            let data = {};
            if (type == 'click') {
                data = Object.assign(record, { codesName: this.codesName })
                this.id = record.id;
            } else {
                data = Object.assign(this.tableData[0], { codesName: this.codesName })
                this.id = this.tableData[0].id;
            }
            this.inputValue = data.name;
            console.log(`选中的数据：`, data)

            this.$emit('clickItem', data);
            this.onclose();
        },
        checkSearch () {
            //当前搜索类型
            //team 班组档案
            let val = this.componentName;
            console.log(val);
            switch (val) {
                case 'office'://部门
                    this.apiUrl = '/system/office/page';
                    this.columns = [
                        { title: "编码", dataIndex: "officeCode", },
                        { title: "机构名称", dataIndex: "officeName", ellipsis: true, },
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        // officeCode: this.inputValue
                    }
                    break;
                case 'team'://班组档案
                    this.apiUrl = '/erp/team/pageList';
                    this.columns = [
                        { title: "班组编码", dataIndex: "code", width: "120", align: "left" },
                        { title: "班组名称", dataIndex: "name", width: "120", align: "left" },
                        { title: "所属机构", dataIndex: "officeName", width: "120", align: "left" },
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        searchKey: this.inputValue
                    }
                    break;
                case 'production'://生产线
                    this.apiUrl = '/erp/productionLine/pageList';
                    this.columns = [
                        { title: "生产线编码", dataIndex: "code", width: "120", align: "left" },
                        { title: "生产线名称", dataIndex: "name", width: "120", align: "left" },
                        { title: "所属车间", dataIndex: "officeName", width: "120", align: "left" },
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        searchKey: this.inputValue
                    }
                    break;
                case 'process'://工序档案
                    this.apiUrl = '/erp/workProcedure/pageList';
                    this.columns = [
                        { title: "工序编码", dataIndex: "code", width: "120", align: "left" },
                        { title: "工序名称", dataIndex: "name", width: "120", align: "left" },
                        {
                            title: "加工方式", dataIndex: "processMethod", width: "120", align: "left", customRender: (text, row, index) => {
                                const type = ["自制", "委外"];
                                return type[text - 1];
                            }
                        },
                        {
                            title: "工资类型", dataIndex: "wagesType", width: "120", align: "left", customRender: (text, row, index) => {
                                const type = ["计件", "计时", "不核算"];
                                return type[text - 1];
                            }
                        },
                        { title: "合格品价格", dataIndex: "qualifiedPrice", width: "120", align: "left" },
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        searchKey: this.inputValue
                    }
                    break;
                case 'processRoute'://工艺路线
                    this.apiUrl = '/erp/processRoute/getList';
                    this.columns = [{ title: '编码', dataIndex: 'code', width: 30, ellipsis: true, },
                    { title: '名称', dataIndex: 'name', ellipsis: true, width: 120, ellipsis: true },
                    // { title: '产品编码', dataIndex: 'inventoryCode', width: 80 },
                    // { title: '产品名称', dataIndex: 'inventoryName', width: 80 },
                    // { title: '规格型号', dataIndex: 'inventorySpecification', width: 80 },
                    {
                        title: '状态', dataIndex: 'status', width: 60,
                        customRender: (text, row, index) => {
                            return text == 1 ? '启用' : '禁用';
                        }
                    }];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        searchKey: this.inputValue,
                        status: 1,            //状态1:正常 0停用
                        examineStatus:  1,    //审核状态1:已审 0:未审
                        // inventoryId: this.record.inventoryId ? this.record.inventoryId : ""
                    }
                    break;
                case 'bomVersion'://子件BOM
                    this.apiUrl = '/bom/getList';
                    this.columns = [
                    { title: '版本号', dataIndex: 'versionCode', ellipsis: true, },
                        {
                        title: 'BOM类型', dataIndex: 'bomType', ellipsis: true,
                        customRender: (text, row, index) => {
                            return <span>{text == 1 ? '装配' : text == 2 ? '销售' : text == 3 ? '生产' : ''}</span>;
                        }
                    },
                    { title: '母件编码', dataIndex: 'inventoryCode', ellipsis: true, },
                    { title: '母件名称', dataIndex: 'inventoryName', ellipsis: true, },
                    { title: '创建日期', dataIndex: 'createDate', ellipsis: true, }];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        inventoryId: this.record.inventoryId ? this.record.inventoryId : "0"
                    }
                    break;
                case 'employees'://员工
                    this.apiUrl = '/sysUser/user/page';
                    this.columns = [
                        { title: "用户姓名", dataIndex: "realName" },
                        { title: "所属机构", dataIndex: "officeName", ellipsis: true, },
                        { title: "手机号", dataIndex: "mobile" },
                        { title: "电子邮箱", dataIndex: "email", ellipsis: true, },
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        searchKey: this.inputValue
                    }
                    break;
                case 'office'://部门
                    this.apiUrl = '/system/office/page';
                    this.columns = [
                        { title: "编码", dataIndex: "officeCode", },
                        { title: "机构名称", dataIndex: "officeName", ellipsis: true, },
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        officeCode: this.inputValue
                    }
                    break;
                case 'process'://工艺路线
                    this.apiUrl = '/erp/processRoute/getList';
                    this.columns = [
                        { title: '编码', dataIndex: 'code', width: 60, },
                        { title: '名称', dataIndex: 'name', ellipsis: true, width: 80, },
                        // { title: '产品编码', dataIndex: 'inventoryCode', width: 80, },
                        // { title: '产品名称', dataIndex: 'inventoryName', width: 80, },
                        // { title: '规格型号', dataIndex: 'inventorySpecification', width: 80, }
                        {
                            title: '状态', dataIndex: 'status', width: 60,
                            customRender: (text, row, index) => {
                                return text == 1 ? '启用' : '禁用';
                            }
                        }
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        searchKey: this.inputValue,
                        status: 1,            //状态1:正常 0停用
                        examineStatus:  1,    //审核状态1:已审 0:未审
                    }
                    break;
                case 'category'://凭证类别
                    this.apiUrl = '/erp/voucherClass/getList';
                    this.columns = [{ title: "凭证字", dataIndex: "classWord", width: 50, key: "classWord", align: "left" },
                    { title: "凭证类别", dataIndex: "className", key: "className", align: "left" },
                    {
                        title: "限制类型", dataIndex: "limitType", key: "limitType", align: "left",
                        customRender: (text, record, index) => {
                            return text == 1 ? '无限制' : text == 2 ? '借方必有' : text == 3 ? '贷方必有' : text == 4 ? '凭证必无' : text == 5 ? '凭证必有' : text == 6 ? '借方比无' : text == 7 ? '贷方比无' : '';
                        }
                    },
                    { title: "限制科目", dataIndex: "accountingName", key: "accountingName", width: 220, ellipsis: true, align: "left" },
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        searchKey: this.inputValue
                    }
                    break;
                case 'warehouse'://仓库
                    let path = this.$route.path;
                    if (path == '/inventory/bills/purchaseIn' || path == '/inventory/bills/productIn' || path == '/inventory/bills/saleOut' || path == '/inventory/bills/materialOut') {
                        //表示是库存管理里的采购入库
                        this.apiUrl = '/in/warehouse/listMyOperationInWarehouses'
                    } else {
                        this.apiUrl = '/in/warehouse/pageList';
                    }
                    this.columns = [
                        { title: "仓库编码", dataIndex: "whCode", },
                        { title: "仓库名称", dataIndex: "whName", },
                        { title: "负责人", dataIndex: "whPerson" },
                        { title: "电话", dataIndex: "whTelephone" },
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        searchKey: this.inputValue
                    }
                    break;
                // case 'ReceiveRdStyle': //入库类别
                //     this.apiUrl = '/in/rdStyle/pageStyleList';
                //     this.columns = [
                //         { title: "出入库类别编码", dataIndex: "code", key: "code" },
                //         { title: "出入库类别名称", dataIndex: "name", key: "name" },
                //         {
                //             title: "类别", dataIndex: "type", key: "type",
                //             customRender: (text) => {
                //                 return text == 1 ? '收' : '发';
                //             }
                //         }
                //     ];
                //     this.postData = {
                //         current: 1,
                //         size: -1,
                //     }
                //     break;
                case 'warehouseTypeIn'://入库类别
                    this.apiUrl = '/in/rdStyle/pageStyleList';
                    this.columns = [
                        { title: "类别编码", dataIndex: "code", key: "code", align: "left", width: 100 },
                        { title: "类别名称", dataIndex: "name", key: "name", align: "left", width: 100 },
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        searchKey: this.inputValue,
                        type: 1,
                    }
                    break;
                case 'warehouseTypeOut'://出库类别
                    this.apiUrl = '/in/rdStyle/pageStyleList';
                    this.columns = [
                        { title: "类别编码", dataIndex: "code", key: "code", align: "left", width: 100 },
                        { title: "类别名称", dataIndex: "name", key: "name", align: "left", width: 100 },
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        searchKey: this.inputValue,
                        type: 2,
                    }
                    break;
                case 'crm'://客户
                    this.apiUrl = '/crm/customer/pageForVoucher';
                    this.columns = [
                        // { title: "首拼码", dataIndex: "crmSimpleName" },
                        { title: "客户名称", dataIndex: "crmName", ellipsis: true, },
                        // { title: "所属地区", dataIndex: "areaName", ellipsis: true, },
                        // { title: "所属行业", dataIndex: "industry", ellipsis: true, },
                        { title: "联系地址", dataIndex: "address", ellipsis: true, },
                        // { title: "客户类型", dataIndex: "partnerClassId", ellipsis: true, scopedSlots: { customRender: "partnerClassCustomer" }},
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        isFinance: 1,
                        companyType: 'isCustomer'
                    }
                    break;
                case 'supplie'://供应商
                    // this.apiUrl = '/vendor/page';
                    this.apiUrl = '/crm/customer/pageForVoucher';
                    this.columns = [
                        // { title: "首拼码", dataIndex: "crmNo", },
                        // { title: "供应商编码", dataIndex: "vendorCode", ellipsis: true, },
                        { title: "供应商名称", dataIndex: "crmName", ellipsis: true, },
                        // { title: "类型", dataIndex: "partnerClassId", scopedSlots: { customRender: "partnerClassId" }, },
                        { title: "联系地址", dataIndex: "address", ellipsis: true, },
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        isFinance: 1,
                        companyType: 'isSupplier'
                    }
                    break;
                case 'contacts'://往来单位
                    // this.apiUrl = '/vendor/page';
                    this.apiUrl = '/crm/customer/pageForVoucher';
                    this.columns = [
                        // { title: "首拼码", dataIndex: "vendorPym", },
                        { title: "往来单位编码", dataIndex: "crmNo", ellipsis: true, },
                        { title: "往来单位名称", dataIndex: "crmName", ellipsis: true, },
                        // { title: "类型", dataIndex: "partnerClassId", scopedSlots: { customRender: "partnerClassId" }, },
                        // { title: "联系地址", dataIndex: "address", ellipsis: true, },
                    ];
                    this.postData = {
                        current: this.pagination.current,
                        size: this.pagination.pageSize,
                        keyWord: this.inputValue,
                        isFinance: 1,
                    }
                    break;
                default:
                    break;
            }
        }
    }
}
</script>
<style lang="less">
    .header-search-wrapper {
        .search-wrapper {
            max-height: 350px;
            box-shadow: 2px 2px 10px 2px #e0e0e0;
            position: fixed;
            z-index: 10016;
            border: 1px solid #a7abb0;
            width: 500px;
        }
        // .ant-table-wrapper .ant-table-placeholder {
        //     position: static !important;
        //     top: 0;
        // }
        .ant-table-wrapper {
            background: #eee;
        }
        .ant-table-tbody {
            cursor: pointer;
        }
        .mask {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(254, 56, 89, 0);
            z-index: 70;
        }
    }
</style>